import {Component, ElementRef, Output, Input, EventEmitter} from '@angular/core';
import * as wangEditor from 'wangeditor/release/wangEditor.js';
import {AdOssUploadService} from '../../lib/service/ad-oss-upload.service';
import {LocalStorageService} from '../../lib/service/local-storage.service';
import {appletApiUrl} from '../../../config/api';

@Component({
    selector: 'editor',
    templateUrl: './editor.component.html',
    styleUrls: ['./editor.component.scss']
})
export class EditorComponent {

    nowApplet;
    private editor: any;
    private pic_sign_url: any;
    private pic_class:any;
    @Output() onPostData = new EventEmitter();
    @Input() pic_sign_url_default="";
    constructor(private el: ElementRef,
                private adOssUploadService: AdOssUploadService,
                private localStorageService: LocalStorageService) {
    }

    ngOnInit() {
        this.nowApplet = this.localStorageService.getNowApplet();
        if(this.pic_sign_url_default){
            let typeString=this.pic_sign_url_default;
            if(typeString == "goods"){
                this.pic_sign_url = '/v1/member/goods_detail/' + this.localStorageService.getUserInfo().id + '/' + this.localStorageService.getNowApplet().id;
            }
            if(typeString == "article"){
                this.pic_sign_url = '/v1/common/post_detail';
            }
            if(typeString == 'activity') {
              this.pic_sign_url = '/v1/common/activity_plan/activity_detail/' + this.localStorageService.getUserInfo().id + '/' + this.localStorageService.getNowApplet().id;
            }
            this.pic_class = typeString;
        }
    }

    ngAfterViewInit() {
        let editordom = this.el.nativeElement.querySelector('#editorElem');

        this.editor = new wangEditor(editordom);
        //关闭编辑器uploadImgShowBase64方式上传图片
        this.editor.customConfig.uploadImgShowBase64 = false;
        this.editor.customConfig.pasteFilterStyle = true;
        this.editor.customConfig.zIndex = 999;
      this.editor.customConfig.menus = [
            'source',           //源代码
            'head',             // 标题
            'bold',             // 粗体
            'italic',           // 斜体
            'underline',        // 下划线
            'strikeThrough',    // 删除线
            'foreColor',        // 文字颜色
            'backColor',        // 背景颜色
            //'link',             // 插入链接
            'list',             // 列表
            'justify',          // 对齐方式
            //'quote',            // 引用
            'emoticon',         // 表情
            'image',            // 插入图片
            'table',            // 表格
            'video',            // 插入视频
            //'code',             // 插入代码
            'undo',             // 撤销
            'redo',             // 重复
            'fullscreen'
        ];

        //开启网络连接图片
        this.editor.customConfig.showLinkImg = true;
        this.editor.customConfig.uploadImgMaxSize = 3 * 1024 * 1024;//3M限定
        this.editor.customConfig.uploadImgMaxLength = 5;//一次上传5张
        this.editor.customConfig.uploadImgTimeout = 3000;//3秒钟

        let appletInfo = this.nowApplet;
        //调用aliyunOSS存储图片
        let uploadService = this.adOssUploadService;
        let sign_url = this.pic_sign_url;
        let pic_class = this.pic_class;
        this.editor.customConfig.customUploadImg = function (files, insert) {
            // files 是 input 中选中的文件列表
            // insert 是获取图片 url 后，插入到编辑器的方法
            //member/goods_detail/{member_id}/{applet_id}
            // uploadService.getSignature(sign_url)
            //     .subscribe(
            //         res1 => {
                        for (let i in files) {
                            let pic = files[i];
                            let timestamp = new Date().getTime();

                            let fromate_name;
                            if (pic.type === "image/png") {
                                fromate_name = ".png";
                            }
                            if (pic.type === "image/jpeg") {
                                fromate_name = ".jpg";
                            }
                            if (pic.type === "image/gif") {
                                fromate_name = ".gif";
                            }

                            // let pic_name = pic_class+"_detail_" + pic.size + "_" + timestamp + fromate_name;
                            // uploadService.fileUpload(pic, res1.data, pic_name, '').subscribe(
                            //     res2 => {
                            //         if (res2.status === 200) {
                            //             let pic_url = res2.url + res1.data.dir + pic_name;
                            //             // alert("上传成功");
                            //             // editorMake.customConfig.customAlert = function (info) {
                            //             //     // info 是需要提示的内容
                            //             //     alert('自定义提示：' + info)
                            //             // }
                            //             insert(pic_url);
                            //         } else {
                            //             alert("图片: " + pic.name + " 上传失败!");
                            //         }
                            //     }
                            // );
                          uploadService.fileUpload_(pic, '').subscribe( res => {
                            if ( res.code === 200) {
                                          const pic_url = appletApiUrl + '/common/attachment/view?id=' + res.data.id;
                                          // alert("上传成功");
                                          // editorMake.customConfig.customAlert = function (info) {
                                          //     // info 是需要提示的内容
                                          //     alert('自定义提示：' + info)
                                          // }
                                          insert(pic_url);
                                      } else {
                                          alert("图片: " + pic.name + " 上传失败!");
                                      }
                          })
                        }
                //     }
                // );
            // 上传代码返回结果之后，将图片插入到编辑器中
            // let imgUrl = "https://usexcx-shop.oss-cn-hangzhou.aliyuncs.com/member/account/10001/10057/logo.png?0.03460735791165859";
            // insert(imgUrl);

        };

        this.editor.create();
    }

    //获取编辑器中的内容
    clickHandle(): any {
        let data = this.editor.txt.html();
        return data;
    }

    //给编辑器附上默认值
    loadingHandle(html_String): any {
        this.editor.txt.html(html_String);
    }

    changedEitorUsePlace(typeString){
        if(typeString == "goods"){
            this.pic_sign_url = '/v1/member/goods_detail/' + this.localStorageService.getUserInfo().id + '/' + this.localStorageService.getNowApplet().id;
        }
        if(typeString == "article"){
            this.pic_sign_url = '/v1/common/post_detail';
        }
        if(typeString == 'activity') {
          this.pic_sign_url = '/v1/common/activity_plan/activity_detail/' + this.localStorageService.getUserInfo().id + '/' + this.localStorageService.getNowApplet().id;
        }
        this.pic_class = typeString;
    }

}
